<template>
  <view>
    <view class="list-view">
      <!-- 	<radio-group @change="onChange"> -->
      <view class="list-item" v-for="(item, index) in list" :key="index">
        <!-- 		<radio color="#2EB0D9" :value="item"></radio> -->
        <image :src="item.pictureName"></image>
        <div class="right">
          <div class="top">
            <div class="name">{{ item.nurseName }}</div>
            <div class="phone">{{ item.tel }}</div>
          </div>
          <div class="bottom">{{ item.hospitalName }}</div>
        </div>
      </view>
      <!-- </radio-group> -->
      <uni-load-more :status="status"></uni-load-more>
    </view>
    <!-- <view class="bottom-fixed-view">
			<view class="submit-btn" @click="submit">确认派发</view>
		</view> -->
  </view>
</template>

<script>
import PageInfo from "../../utils/pageutils";
import * as nurseInfo from "../../common/api/nurseInfo.js";
import * as orderInfo from "../../common/api/orderInfo.js";
export default {
  data() {
    return {
      pageInfo: new PageInfo(),
      list: [],
      status: "more",
      current: null,
      uid: "",
    };
  },
  onLoad(opt) {
    console.log("opt", opt);
    if (opt.uid) {
      this.uid = opt.uid;
    }
    if (opt.hospitalUid) {
      this.uid = opt.hospitalUid;
    }
    this.refresh();
  },
  onPullDownRefresh() {
    this.refresh();
  },
  onReachBottom() {
    this.loadMore();
  },
  methods: {
    refresh() {
      this.pageInfo.reset();
      this.list = [];
      this.status = "loading";
      this.getList();
    },
    loadMore() {
      if (this.pageInfo.isNotLoadAll) {
        this.status = "loading";
        this.pageInfo.nextPage();
        this.getList();
      } else {
        this.status = "noMore";
      }
    },
    getList() {
      const param = {
        pageIndex: this.pageInfo.pageIndex,
        pageSize: this.pageInfo.pageSize,
        hospitalUid: this.uid,
      };
      nurseInfo
        .queryByPage(param)
        .then((result) => {
          const list = result.data.data.rows || [];
          const total = result.data.data.total;
          this.list = [...this.list, ...list];
          this.pageInfo.total = total;
          this.pageInfo.loadedTotal = this.list.length;
          setTimeout(() => {
            if (this.pageInfo.isNotLoadAll) {
              this.status = "more";
            } else {
              this.status = "noMore";
            }
            uni.stopPullDownRefresh();
          }, 200);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    onChange(e) {
      this.current = e.detail.value;
    },
    submit() {
      if (this.current === null) {
        uni.showToast({
          icon: "none",
          title: "请选择护士",
        });
        return;
      }
      uni.showModal({
        title: "提示",
        content: "确认提交？",
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            const param = {
              uid: this.uid,
              dispatchNursesUid: this.current.uid,
              dispatchNurses: this.current.nurseName,
              nursesPhone: this.current.tel,
              paymentStatus: "待出发",
            };
            orderInfo
              .update(param)
              .then((result) => {
                uni.navigateBack();
              })
              .catch((error) => {
                console.log(error);
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list-view {
  width: 100%;
  box-sizing: border-box;
  padding: 10rpx;
  padding-bottom: 80rpx;
}
.list-item {
  width: 100%;
  padding: 20rpx 10rpx;
  box-sizing: border-box;
  background: white;
  display: flex;
  align-items: center;
  margin-top: 10rpx;
  radio {
    transform: scale(0.7);
  }
  image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
  }
  .right {
    margin-left: 10rpx;
    .top {
      display: flex;
      color: #232323;
      font-size: 30rpx;
      font-weight: bold;
      .name {
      }
      .phone {
        margin-left: 10rpx;
      }
    }
    .bottom {
      color: #232323;
      font-size: 26rpx;
    }
  }
}

.bottom-fixed-view {
  position: fixed;
  bottom: 0;
  background: #f9f9f9;
  width: 100%;
  box-sizing: border-box;
  padding: 10rpx;
  .submit-btn {
    background: #2eb0d9;
    color: white;
    width: 100%;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40rpx;
  }
}
</style>
